<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row>
                <el-col :span="1">
                    <el-button type="primary">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="this.RoleList"
                stripe
                border
                style="width:100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <!--<pre>{{scope.row}}</pre>-->
                        <el-row class="vcenter" v-for="(item1,i1) in scope.row.children" :key="item1.id">
                            <!--渲染一级权限-->
                            <el-col :span="5">
                                <el-tag closable>{{item1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!--渲染二级，三级权限-->
                            <el-col :span="19">
                                <el-row v-for="(item2,i2) in item1.children" :key="item2.id">
                                    <el-col :span="8" class="vcenter">
                                        <el-tag type="success" closable>{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="16" class="vcenter">
                                        <el-tag v-for="(item3,i3) in item2.children" :key="item3.id" closable>
                                            {{item3.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="remark"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <!--{{scope.row}}-->
                        <el-switch v-model="scope.row.status" @change="updateUserStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                        <el-button type="warning" icon="el-icon-setting" size="mini">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card>
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.number"
                :page-sizes="[1, 2, 3, 5,10]"
                :page-size="queryParam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            RoleList:[],
            total:0, 
            sizes:1, 
            prev:true, 
            pager:10, 
            next:true, 
            jumper:true,
            queryParam:{
                "direction": "",
                "fastSearch": "",
                "field": "",
                "number": 1,
                "searchParams": [
                    {
                        "fieldName": "",
                        "operator": "",
                        "value": {},
                        "value1": {}
                    }
                ],
                "size": 10
            }
        }
    },
    created(){
        this.getRolesList()
    },
    methods:{
        async getRolesList() {
            //在需要的事件中直接使用
            this.$axios.post(
                'role/list',this.queryParam,
                {
                    headers:{
                        'Authorization': window.sessionStorage.getItem('token')
                    }
                }
            )
            .then(res=>{
                console.log('用户列表请求成功',res.data.data.data)

                this.total = res.data.data.totalElements;
                this.pager = res.data.data.totalPages;  
                this.size =  res.data.data.size;
                this.prev =  res.data.data.hasPrevious;
                this.next =  res.data.data.hasNext;
                this.RoleList = res.data.data.data;
            })
            .catch(Error=>{
                console.log('请求失败',Error)
            })    

            this.RoleList = [];

            const{data :res} = await this.$http.get('roles')
            this.RoleList = res.data 
            console.log(this.RoleList)
            return this.$message.success('获取角色列表成功')
        },
        handleSizeChange(val){
            this.queryParam.size = val
            this.getRolesList()
        },
        handleCurrentChange(val){
            this.queryParam.number=val
            this.getRolesList()
        },
    }
}
</script>

<style scoped>
.el-row{
    margin-bottom:10px;
}

.el-tag{
    margin: 8px;
}

.vcenter{
    display: flex;
    align-items: center;
}

.el-table-column{
    text-align: center;
}
.el-pagination{
    text-align: left;
}
.el-form-item{
    margin-right: 50px;
}
</style>